<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all" />
    <title>公司权限列表</title>
</head>
<body>
<div style="width: 95%;height: 95%;margin: auto">
    <div>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">关键字:</lable>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="keywords" placeholder="搜索关键字">
                    </div>
                </div>
                <button class="layui-btn layui-icon layui-icon-search" type="button" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-primary layui-icon layui-icon-refresh-1" id="resetBtn" type="reset" >重置</button>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green"/>
    <div>
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-add-circle" id="addBtn">添加一级菜单</button>
        <table id="dataTable"></table>
    </div>
</div>

<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon">&#xe654;</i> 添加
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="update">
            <i class="layui-icon">&#xe642;</i> 修改
        </button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
            <i class="layui-icon">&#xe640;</i> 删除
        </button>
    </div>
</script>

<script type="text/html" id="editTpl">
    <div style="margin-top: 20px;margin-left:20px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="pId" name="pId" value="0" />
                        <input class="layui-input" name="title" placeholder="权限名称" lay-verify="required" lay-reqText="权限名称不能为空"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">图 标</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="icon" placeholder="图标" />
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">连接地址</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="href" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">是否展开</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="spread" value="1"  title="展 开"/>
                        <input type="radio" name="spread" value="0"  checked title="不展开"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">打开方式</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="target" value="_self" checked  title="当 前"/>
                        <input type="radio" name="target" value="_blank"   title="新窗口"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">排序值</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="sort" value="0" lay-verify="number" />
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">类 型</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="type" value="1"  checked title="菜 单"/>
                        <input type="radio" name="type" value="2"   title="按 钮"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">标 签</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="tag"/>
                    </div>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.config({base: '${pageContext.request.contextPath}/resources/'})
        .extend({treeTable: 'treetable/treeTable'})
        .use(['table','jquery','layer','form','treeTable'],function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var treeTable = layui.treeTable;

            var insTab = treeTable.render({
                elem: "#dataTable",
                cols: [
                    {field: 'id', title: 'ID'},
                    {field: 'parentId', title: '父菜单ID'},
                    {field: 'title', title: '权限名'},
                    {field: 'type', title: '类型',templet:function (d) {
                            if (d.type == 1){
                                return "<b style='color:green'>菜单</b>"
                            }else if(d.type == 2){
                                return "<b style='color:red'>按钮</b>"
                            }
                        }},
                    {field: 'icon', title: '图标', templet:function (d) {
                            return "<i class='layui-icon'>"+d.icon+"</i>"
                        }},
                    {field: 'href', title: '地址'},
                    {field: 'sort', title: '排序'},
                    {field: 'tag', title: '标签'},
                    {title: '操作', toolbar: "#rowBtns",width:240}
                ],
                reqData: function (data, callback) {
                    $.get("${pageContext.request.contextPath}/comp/perm/list.do", function (rs) {
                        callback(rs.data);
                    });
                },
                tree: {
                    iconIndex: 1, //图标的索引
                    onlyIconControl: true,//仅允许点击图标折叠
                    arrowType: 'arrow1',//箭头类型
                    isPidData: true,//是否是 pid 形式的数据  使用字段表示父子关系
                    pidName: "pId",
                    openName:"spread",
                }
            });

            $("#searchBtn").click(function () {
                var keywords = $("#keywords").val();
                insTab.filterData(keywords);
            });
            $("#resetBtn").click(function () {
                insTab.refresh();
            });

            treeTable.on("tool(dataTable)",function(d){
                var event = d.event;
                var data = d.data;
                if(event == "add"){
                    add(data);
                }else if(event == "update"){
                    update(data);
                }else if (event == "del"){
                    del(data);
                }
            });

            function add(data) {
                layer.open({
                    title:'编辑',
                    type:1,
                    content:$("#editTpl").html(),
                    area:['720','380'],
                    success:function (layero,index) {
                        if(data != undefined && data != null){
                            $("#pId").val(data.id);
                        }
                        form.render();
                        form.on('submit(submitBtnFilter)',function (d) {
                            var param = d.field;
                            $.post("${pageContext.request.contextPath}/comp/perm/add.do",param,function (rs) {
                                if (rs.code != 200){
                                    layer.msg(rs.msg);
                                    return false;
                                }
                                layer.msg(rs.msg);
                                $("#resetBtn").click();
                                layer.close(index);
                            });
                            return false;
                        });
                    },
                    btn:['确认','取消'],
                    btnAlign:'c',
                    yes:function (index,layero) {
                        $("#submitBtn").click();
                    }
                })
            }

            function update(data){
                layer.open({
                    title:'编辑',
                    type:1,
                    content:$("#editTpl").html(),
                    area:['720','380'],
                    success:function (layero,index) {
                        form.val("editFormFilter",data);
                        form.render();
                        form.on('submit(submitBtnFilter)',function (d) {
                            var param = d.field;
                            param.id = data.id;
                            $.post("${pageContext.request.contextPath}/comp/perm/update.do",param,function (rs) {
                                if (rs.code != 200){
                                    layer.msg(rs.msg);
                                    return false;
                                }
                                layer.msg(rs.msg);
                                $("#resetBtn").click();
                                layer.close(index);
                            });
                            return false;//阻止表单默认提交
                        });
                    },
                    btn:['确认','取消'],
                    btnAlign:'c',
                    yes:function (index,layero) {
                        $("#submitBtn").click();
                    }
                })
            }

            function del(data) {
                layer.confirm("确定要删除该权限吗?",function (index) {
                    $.get("${pageContext.request.contextPath}/comp/perm/delete.do",{id:data.id},function (rs) {
                        if (rs.code != 200){
                            layer.msg(rs.msg);
                            return false;
                        }
                        layer.msg(rs.msg);
                        insTab.refresh();
                    });
                });
            }
            $("#addBtn").click(function () {
                add();
            });
        })
</script>
</body>
</html>
